import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _Button from "choerodon-ui/pro/lib/button";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _applyDecoratedDescriptor from "@babel/runtime/helpers/esm/applyDecoratedDescriptor";
import _merge from "lodash/merge";
import _isArray from "lodash/isArray";

var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, _dec11, _dec12, _dec13, _dec14, _dec15, _dec16, _class;

import React from 'react';
import ReactDOM from 'react-dom';
import { Bind } from 'lodash-decorators';
import { Popover } from 'antd';
import intl from "../intl";
import Position from "./Position";
import styles from "./index.less?modules";
var Guider = (_dec = Bind(), _dec2 = Bind(), _dec3 = Bind(), _dec4 = Bind(), _dec5 = Bind(), _dec6 = Bind(), _dec7 = Bind(), _dec8 = Bind(), _dec9 = Bind(), _dec10 = Bind(), _dec11 = Bind(), _dec12 = Bind(), _dec13 = Bind(), _dec14 = Bind(), _dec15 = Bind(), _dec16 = Bind(), (_class = /*#__PURE__*/function () {
  function Guider() {
    _classCallCheck(this, Guider);

    this.timer = void 0;
    this.currentStep = 0;
    this.currentElement = null;
    this.steps = [];
    this.isLast = true;
    this.isFirst = true;
    this.isActivated = false;
    this.fixed = false;
    this.hints = [];
    this.options = {
      showButtons: true,
      overlayPadding: 5,
      allowClose: false,
      allowInteraction: true,
      opacity: 0.4,
      backgroundColor: 'black'
    };
  }

  _createClass(Guider, [{
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.handleClose();
    }
  }, {
    key: "querySelectorPromise",
    value: function querySelectorPromise(querySelector) {
      var _this = this;

      var fixed = this.fixed;
      return new Promise(function (resolve, reject) {
        var count = 0;
        _this.timer = setInterval(function () {
          var node = null;

          if (fixed) {
            var arr = document.querySelectorAll(querySelector);
            node = arr[arr.length - 1];
          } else {
            node = document.querySelector(querySelector);
          }

          count++;

          if (node) {
            clearInterval(_this.timer);
            _this.timer = null;
            resolve(node);
          } else if (count >= 5) {
            clearInterval(_this.timer);
            _this.timer = null;
            reject(new Error('Element not find'));
          }
        }, 500);
      });
    }
  }, {
    key: "isDomElement",
    value: function isDomElement(element) {
      return element && typeof element === 'object' && 'nodeType' in element;
    }
  }, {
    key: "createNodeFromString",
    value: function createNodeFromString(htmlString, selector) {
      if (selector) {
        var domElement = document.querySelector(selector);

        if (domElement) {
          return domElement;
        }
      }

      var div = document.createElement('div');
      div.innerHTML = htmlString.trim();
      return div.firstChild;
    }
  }, {
    key: "isInView",
    value: function isInView(currentElement) {
      var currentStep = this.currentStep,
          steps = this.steps;
      var _steps$currentStep$op = steps[currentStep].option;
      _steps$currentStep$op = _steps$currentStep$op === void 0 ? {} : _steps$currentStep$op;
      var _steps$currentStep$op2 = _steps$currentStep$op.getContainer,
          getContainer = _steps$currentStep$op2 === void 0 ? '.page-container' : _steps$currentStep$op2;
      var top = currentElement.offsetTop;
      var left = currentElement.offsetLeft;
      var width = currentElement.offsetWidth;
      var height = currentElement.offsetHeight;
      var el = currentElement;

      while (el.offsetParent) {
        el = el.offsetParent;
        top += el.offsetTop;
        left += el.offsetLeft;
      }

      var container = document.body.querySelector(getContainer);

      if (container) {
        var _container$scrollTop = container.scrollTop,
            scrollTop = _container$scrollTop === void 0 ? 0 : _container$scrollTop,
            _container$scrollLeft = container.scrollLeft,
            scrollLeft = _container$scrollLeft === void 0 ? 0 : _container$scrollLeft;
        return top >= scrollTop + 128 && left >= scrollLeft && top + height <= window.pageYOffset + window.innerHeight && left + width <= window.pageXOffset + window.innerWidth;
      } else {
        return top >= 128 && left >= 0 && top + height <= window.pageYOffset + window.innerHeight && left + width <= window.pageXOffset + window.innerWidth;
      }
    }
  }, {
    key: "scrollManually",
    value: function scrollManually(currentElement) {
      var currentStep = this.currentStep,
          steps = this.steps;
      var _steps$currentStep$op3 = steps[currentStep].option;
      _steps$currentStep$op3 = _steps$currentStep$op3 === void 0 ? {} : _steps$currentStep$op3;
      var _steps$currentStep$op4 = _steps$currentStep$op3.getContainer,
          getContainer = _steps$currentStep$op4 === void 0 ? '.page-container' : _steps$currentStep$op4;
      var container = null;

      if (this.isDomElement(getContainer)) {
        container = getContainer;
      } else {
        container = document.body.querySelector(getContainer);
      }

      var elementRect = currentElement.getBoundingClientRect();
      var absoluteElementTop = elementRect.top;

      if (absoluteElementTop > window.innerHeight) {
        container.scrollTo(0, 0);
      } else {
        var middle = absoluteElementTop - window.innerHeight;
        container.scrollTo(0, middle);
      }
    }
  }, {
    key: "bringInView",
    value: function bringInView(currentElement) {
      if (!currentElement) {
        return;
      }

      if (!currentElement.scrollIntoView) {
        this.scrollManually(currentElement);
        return;
      }

      try {
        currentElement.scrollIntoView({
          behavior: 'instant',
          block: 'center'
        });
      } catch (e) {
        this.scrollManually(currentElement);
      }
    } // @Bind()
    //  getScrollParent(element) {
    //   let style = window.getComputedStyle(element);
    //   const excludeStaticParent = (style.position === "absolute");
    //   const overflowRegex = /(auto|scroll)/;
    //   if (style.position === "fixed") return document.body;
    //   for (let parent = element; (parent = parent.parentElement);) {
    //     style = window.getComputedStyle(parent);
    //     // if (excludeStaticParent && style.position === "static") {
    //     //   continue;
    //     // }
    //     if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
    //   }
    //   return document.body;
    // }

  }, {
    key: "reset",
    value: function reset(flag) {
      var currentElement = this.currentElement;
      clearInterval(this.timer);
      this.timer = null;
      var node = document.body.querySelector('#guider-stage');

      if (node) {
        ReactDOM.unmountComponentAtNode(node);

        if (currentElement) {
          currentElement.classList.remove(styles.highlighted);
        }

        if (flag) {
          this.isActivated = false;
          var overlay = document.body.querySelector("#guider-overlay");

          if (overlay && overlay.parentElement) {
            document.body.removeChild(overlay);
          }

          document.body.removeChild(node);
        }
      }
    }
  }, {
    key: "handleNext",
    value: function handleNext() {
      var currentStep = this.currentStep,
          steps = this.steps,
          isActivated = this.isActivated;
      var nextStep = steps[currentStep + 1];

      if (isActivated) {
        if (!nextStep) {
          this.handleClose();
        } else {
          var _nextStep$option = nextStep.option;
          _nextStep$option = _nextStep$option === void 0 ? {} : _nextStep$option;
          var fixed = _nextStep$option.fixed;
          var _steps$currentStep$on = steps[currentStep].onNext,
              onNext = _steps$currentStep$on === void 0 ? function (e) {
            return e;
          } : _steps$currentStep$on;
          onNext();
          this.reset();
          this.currentStep = currentStep + 1;
          this.fixed = fixed;
          this.highLight(nextStep.element, currentStep + 1);
        }
      }
    }
  }, {
    key: "handleLast",
    value: function handleLast() {
      var currentStep = this.currentStep,
          steps = this.steps,
          isActivated = this.isActivated;
      var lastStep = steps[currentStep - 1];

      if (isActivated) {
        if (!lastStep) {
          this.handleClose();
        } else {
          var _lastStep$option = lastStep.option;
          _lastStep$option = _lastStep$option === void 0 ? {} : _lastStep$option;
          var fixed = _lastStep$option.fixed;
          var _steps$currentStep$on2 = steps[currentStep].onLast,
              onLast = _steps$currentStep$on2 === void 0 ? function (e) {
            return e;
          } : _steps$currentStep$on2;
          onLast();
          this.reset();
          this.currentStep = currentStep - 1;
          this.fixed = fixed;
          this.highLight(lastStep.element, currentStep - 1);
        }
      }
    }
  }, {
    key: "handleClose",
    value: function handleClose() {
      clearInterval(this.timer);
      this.timer = null;
      this.reset(true);
      var currentStep = this.currentStep,
          steps = this.steps;

      if (steps[currentStep]) {
        var _steps$currentStep$on3 = steps[currentStep].onClose,
            onClose = _steps$currentStep$on3 === void 0 ? function (e) {
          return e;
        } : _steps$currentStep$on3;
        onClose();
      }
    }
  }, {
    key: "showPopover",
    value: function showPopover() {
      var _this2 = this;

      var popoverOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      var position = arguments.length > 1 ? arguments[1] : undefined;
      var offset = arguments.length > 2 ? arguments[2] : undefined;
      var flag = arguments.length > 3 ? arguments[3] : undefined;
      var _this$options = this.options,
          overlayPadding = _this$options.overlayPadding,
          popoverShowButtons = _this$options.showButtons,
          interactionFlag = _this$options.allowInteraction;
      var isLast = this.isLast,
          isFirst = this.isFirst;
      var title = popoverOptions.title,
          content = popoverOptions.content,
          _popoverOptions$showB = popoverOptions.showButtons,
          showButtons = _popoverOptions$showB === void 0 ? popoverShowButtons : _popoverOptions$showB;
      var offsetX = offset.offsetX,
          offsetY = offset.offsetY,
          selfWidth = offset.selfWidth,
          selfHeight = offset.selfHeight,
          _offset$allowInteract = offset.allowInteraction,
          allowInteraction = _offset$allowInteract === void 0 ? interactionFlag : _offset$allowInteract;
      var requiredPadding = overlayPadding * 2;
      var style = {};
      var width = selfWidth === 0 ? position.right - position.left : selfWidth;
      var height = selfHeight || position.bottom - position.top; // style.border = '1px solid #aaa';

      style.position = 'absolute';
      style.width = "".concat(width + requiredPadding, "px");
      style.height = "".concat(height + requiredPadding, "px");
      style.top = "".concat(position.top - overlayPadding + offsetY, "px");
      style.left = "".concat(position.left - overlayPadding + offsetX, "px");

      if (!selfWidth && !selfHeight && !flag) {
        style.top = "50%";
        style.left = "50%";
      }

      if (!allowInteraction) {
        var node = document.body.querySelector('#guider-stage');
        node.style.zIndex = 2002;
        style.zIndex = 2002;
      }

      var ButtonsRender = function ButtonsRender() {
        return /*#__PURE__*/React.createElement("div", {
          className: styles['guider-buttons']
        }, showButtons && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, {
          onClick: _this2.handleClose
        }, intl.get('cpaas.common.model.button.close').d('关闭')), !isFirst && /*#__PURE__*/React.createElement(_Button, {
          onClick: _this2.handleLast
        }, intl.get('cpaas.common.model.button.previous').d('上一步')), !isLast && /*#__PURE__*/React.createElement(_Button, {
          onClick: _this2.handleNext
        }, intl.get('cpaas.common.model.button.next').d('下一步'))));
      };

      var contentText = /*#__PURE__*/React.createElement("div", null, content, ButtonsRender());
      var popover = /*#__PURE__*/React.createElement(Popover, {
        title: title || '',
        overlayStyle: {
          zIndex: '2003'
        },
        content: contentText,
        visible: true,
        autoAdjustOverflow: true
      }, /*#__PURE__*/React.createElement("div", {
        style: _objectSpread({}, style)
      }));
      return popover;
    }
  }, {
    key: "getCalculatedPosition",
    value: function getCalculatedPosition(node) {
      var _document = document,
          body = _document.body;
      var _document2 = document,
          documentElement = _document2.documentElement;
      var scrollTop = window.pageYOffset || documentElement.scrollTop || body.scrollTop;
      var scrollLeft = window.pageXOffset || documentElement.scrollLeft || body.scrollLeft;
      var elementRect = node.getBoundingClientRect();
      return new Position({
        top: elementRect.top + scrollTop,
        left: elementRect.left + scrollLeft,
        right: elementRect.left + scrollLeft + elementRect.width,
        bottom: elementRect.top + scrollTop + elementRect.height
      });
    }
  }, {
    key: "GetElementAndDetail",
    value: function () {
      var _GetElementAndDetail = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(current) {
        var querySelector, domElement, currentStep, steps, _steps$currentStep$op5, _steps$currentStep$op6, getContainer, _steps$currentStep$op7, offsetY, container, middle, position;

        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                querySelector = current;
                domElement = null;

                if (querySelector) {
                  _context.next = 12;
                  break;
                }

                // TODO:
                currentStep = this.currentStep, steps = this.steps;

                if (!steps[currentStep]) {
                  _context.next = 12;
                  break;
                }

                _steps$currentStep$op5 = steps[currentStep].option;
                _steps$currentStep$op5 = _steps$currentStep$op5 === void 0 ? {} : _steps$currentStep$op5;
                _steps$currentStep$op6 = _steps$currentStep$op5.getContainer, getContainer = _steps$currentStep$op6 === void 0 ? '.page-container' : _steps$currentStep$op6, _steps$currentStep$op7 = _steps$currentStep$op5.offsetY, offsetY = _steps$currentStep$op7 === void 0 ? 0 : _steps$currentStep$op7;
                container = null;

                if (this.isDomElement(getContainer)) {
                  container = getContainer;
                } else {
                  container = document.body.querySelector(getContainer);
                }

                if (container && container.scrollTo) {
                  if (offsetY > window.innerHeight) {
                    middle = offsetY - window.innerHeight;
                    container.scrollTo(0, middle);
                  } else {
                    container.scrollTo(0, 0);
                  }
                }

                return _context.abrupt("return", {
                  position: new Position({
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0
                  })
                });

              case 12:
                if (!this.isDomElement(querySelector)) {
                  _context.next = 16;
                  break;
                }

                domElement = querySelector;
                _context.next = 19;
                break;

              case 16:
                _context.next = 18;
                return this.querySelectorPromise(querySelector);

              case 18:
                domElement = _context.sent;

              case 19:
                if (domElement) {
                  _context.next = 21;
                  break;
                }

                return _context.abrupt("return", null);

              case 21:
                this.bringInView(domElement);
                position = this.getCalculatedPosition(domElement);
                return _context.abrupt("return", {
                  position: position,
                  element: domElement
                });

              case 24:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      function GetElementAndDetail(_x) {
        return _GetElementAndDetail.apply(this, arguments);
      }

      return GetElementAndDetail;
    }()
  }, {
    key: "highLight",
    value: function highLight(selector) {
      var _this3 = this;

      var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
      setTimeout(function () {
        _this3.GetElementAndDetail(selector).then(function (res) {
          // if (res) {
          var _this3$options = _this3.options,
              overlayPadding = _this3$options.overlayPadding,
              allowClose = _this3$options.allowClose,
              opacity = _this3$options.opacity,
              backgroundColor = _this3$options.backgroundColor;
          var steps = _this3.steps;
          var _steps$index = steps[index],
              _steps$index$option = _steps$index.option,
              option = _steps$index$option === void 0 ? {} : _steps$index$option,
              _steps$index$onHighli = _steps$index.onHighlighted,
              onHighlighted = _steps$index$onHighli === void 0 ? function (e) {
            return e;
          } : _steps$index$onHighli,
              popoverOption = _steps$index.popover;
          var _res$position = res.position,
              position = _res$position === void 0 ? {} : _res$position,
              element = res.element;
          _this3.currentElement = element;
          _this3.isLast = steps.length === index + 1;
          _this3.isFirst = index === 0;

          if (element) {
            element.classList.add(styles.highlighted);
          }

          var node = _this3.createNodeFromString("<div id='guider-stage'></div>".trim(), '#guider-stage');

          node.style.position = 'absolute';
          node.style.width = "100%";
          node.style.height = "100%";
          node.style.top = "0px";
          node.style.left = "0px";
          node.style.opacity = "0.4";
          node.style.zIndex = "-1";
          document.body.appendChild(node); // document.body.appendChild(ctx);

          var allowInteraction = option.allowInteraction,
              _option$allowClose = option.allowClose,
              allowCloseDetail = _option$allowClose === void 0 ? allowClose : _option$allowClose,
              _option$offsetX = option.offsetX,
              offsetX = _option$offsetX === void 0 ? 0 : _option$offsetX,
              _option$offsetY = option.offsetY,
              offsetY = _option$offsetY === void 0 ? 0 : _option$offsetY,
              _option$width = option.width,
              selfWidth = _option$width === void 0 ? 0 : _option$width,
              _option$height = option.height,
              selfHeight = _option$height === void 0 ? 0 : _option$height,
              _option$getContainer = option.getContainer,
              getContainer = _option$getContainer === void 0 ? '.page-container' : _option$getContainer;
          var ElementFlag = false;

          if (element) {
            ElementFlag = true;
          }

          var popover = _this3.showPopover(popoverOption, position, {
            allowInteraction: allowInteraction,
            offsetX: offsetX,
            offsetY: offsetY,
            selfWidth: selfWidth,
            selfHeight: selfHeight
          }, ElementFlag);

          ReactDOM.render(popover, node);
          var requiredPadding = overlayPadding * 2; // const overlay = this.createNodeFromString(`<canvas id='guider-canvas'></canvas>`.trim(), '#guider-canvas');
          // const ctx = overlay.getContext('2d');
          // overlay.onclick = null;
          // if (allowCloseDetail) {
          //   overlay.addEventListener('click', this.handleNext, false);
          // }
          // else {
          //   overlay.removeEventListener('click', this.handleNext, false);
          // }
          // overlay.width = window.outerWidth;
          // overlay.height = scrollHeight;
          // overlay.style.position = 'absolute';
          // overlay.style.top = '0px';
          // overlay.style.left = '0px';
          // overlay.style.opacity = opacity;
          // overlay.classList.add(styles.canvas);
          // ctx.fillStyle = backgroundColor;
          // ctx.fillRect(0, 0, window.outerWidth, scrollHeight);

          var width = position.right - position.left; // ctx.clearRect(`${position.left - overlayPadding}`, `${position.top - overlayPadding}`, `${width + requiredPadding}`, `${height + requiredPadding}`);
          // document.body.appendChild(overlay);

          var overlay = _this3.createNodeFromString("<div id='guider-overlay'></div>".trim(), '#guider-overlay'); // overlay.removeChild(overlay.childNodes );


          overlay.innerHTML = ''; // TODO:

          var container = null;
          var scrollTop = 0;

          if (_this3.isDomElement(getContainer)) {
            container = getContainer;
          } else {
            container = document.body.querySelector(getContainer);
          }

          if (container) {
            var _container = container,
                _container$scrollTop2 = _container.scrollTop,
                containerScrollTop = _container$scrollTop2 === void 0 ? 0 : _container$scrollTop2;
            scrollTop = containerScrollTop;
          } // const { scrollHeight } = container;
          // const scrollTop=0


          var div = document.createElement('div');
          div.style.position = 'absolute';
          div.style.width = "".concat(position.left - overlayPadding + offsetX, "px");
          div.style.height = "100%";
          div.style.top = "0px";
          div.style.left = "0px";
          div.style.opacity = opacity;
          div.style.backgroundColor = backgroundColor;
          div.style.zIndex = 2000;
          var div2 = document.createElement('div');
          div2.style.position = 'absolute';
          div2.style.width = "".concat(width + requiredPadding + selfWidth, "px");
          div2.style.height = "".concat(position.top - overlayPadding + offsetY, "px");
          div2.style.top = "0px";
          div2.style.left = "".concat(position.left - overlayPadding + offsetX, "px");
          div2.style.opacity = opacity;
          div2.style.backgroundColor = backgroundColor;
          div2.style.zIndex = 2000;
          var div3 = document.createElement('div');
          div3.style.position = 'absolute';
          div3.style.width = "".concat(width + requiredPadding + selfWidth, "px");
          div3.style.height = "calc(100% - ".concat(position.bottom - overlayPadding - offsetY - selfHeight - scrollTop, "px)");
          div3.style.top = "".concat(position.bottom + overlayPadding + offsetY + selfHeight, "px");
          div3.style.left = "".concat(position.left - overlayPadding + offsetX, "px");
          div3.style.opacity = opacity;
          div3.style.backgroundColor = backgroundColor;
          div3.style.zIndex = 2000;
          var div4 = document.createElement('div');
          div4.style.position = 'absolute';
          div4.style.width = "".concat(window.outerWidth - position.right - overlayPadding - offsetX - selfWidth, "px");
          div4.style.height = "100%";
          div4.style.top = "0px";
          div4.style.left = "".concat(position.right + overlayPadding + offsetX + selfWidth, "px");
          div4.style.opacity = opacity;
          div4.style.backgroundColor = backgroundColor;
          div4.style.zIndex = 2000;

          if (allowCloseDetail) {
            div.addEventListener('click', _this3.handleNext, false);
            div2.addEventListener('click', _this3.handleNext, false);
            div3.addEventListener('click', _this3.handleNext, false);
            div4.addEventListener('click', _this3.handleNext, false);
          } else {
            div.removeEventListener('click', _this3.handleNext, false);
            div2.removeEventListener('click', _this3.handleNext, false);
            div3.removeEventListener('click', _this3.handleNext, false);
            div4.removeEventListener('click', _this3.handleNext, false);
          }

          overlay.appendChild(div);
          overlay.appendChild(div2);
          overlay.appendChild(div3);
          overlay.appendChild(div4);
          document.body.appendChild(overlay);
          onHighlighted();
        }).catch(function () {
          _this3.handleNext();
        });
      }, 100);
    }
  }, {
    key: "start",
    value: function start() {
      this.isActivated = true;
      var steps = this.steps;

      if (_isArray(steps)) {
        var _steps$ = steps[0],
            _steps$$option = _steps$.option;
        _steps$$option = _steps$$option === void 0 ? {} : _steps$$option;
        var _steps$$option$fixed = _steps$$option.fixed,
            fixed = _steps$$option$fixed === void 0 ? false : _steps$$option$fixed,
            _steps$$onStart = _steps$.onStart,
            onStart = _steps$$onStart === void 0 ? function (e) {
          return e;
        } : _steps$$onStart;
        onStart();
        this.currentStep = 0;
        this.isLast = steps.length < 2;
        this.fixed = fixed;
        this.highLight(steps[0].element);
      } else {
        var _steps$option = steps.option;
        _steps$option = _steps$option === void 0 ? {} : _steps$option;

        var _steps$option$fixed = _steps$option.fixed,
            _fixed = _steps$option$fixed === void 0 ? false : _steps$option$fixed,
            _steps$onStart = steps.onStart,
            _onStart = _steps$onStart === void 0 ? function (e) {
          return e;
        } : _steps$onStart;

        _onStart();

        this.currentStep = 0;
        this.fixed = _fixed;
        this.highLight(steps.element);
      }
    }
  }, {
    key: "defineOptions",
    value: function defineOptions(options) {
      _merge(this.options, options);
    }
  }, {
    key: "mergeSteps",
    value: function mergeSteps(steps) {
      this.steps = _merge(this.steps, steps);
    }
  }, {
    key: "defineSteps",
    value: function defineSteps(steps) {
      this.steps = steps;
    }
  }, {
    key: "defineHints",
    value: function defineHints(hints) {
      this.hints = hints;
    }
  }, {
    key: "GetElementAndDetailHint",
    value: function () {
      var _GetElementAndDetailHint = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(querySelector) {
        var domElement, position;
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                domElement = null;

                if (!this.isDomElement(querySelector)) {
                  _context2.next = 5;
                  break;
                }

                domElement = querySelector;
                _context2.next = 8;
                break;

              case 5:
                _context2.next = 7;
                return this.querySelectorPromise(querySelector);

              case 7:
                domElement = _context2.sent;

              case 8:
                if (domElement) {
                  _context2.next = 10;
                  break;
                }

                return _context2.abrupt("return", null);

              case 10:
                position = this.getCalculatedPosition(domElement);
                return _context2.abrupt("return", {
                  position: position,
                  element: domElement
                });

              case 12:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2, this);
      }));

      function GetElementAndDetailHint(_x2) {
        return _GetElementAndDetailHint.apply(this, arguments);
      }

      return GetElementAndDetailHint;
    }()
  }]);

  return Guider;
}(), (_applyDecoratedDescriptor(_class.prototype, "querySelectorPromise", [_dec], Object.getOwnPropertyDescriptor(_class.prototype, "querySelectorPromise"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "isDomElement", [_dec2], Object.getOwnPropertyDescriptor(_class.prototype, "isDomElement"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "createNodeFromString", [_dec3], Object.getOwnPropertyDescriptor(_class.prototype, "createNodeFromString"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "isInView", [_dec4], Object.getOwnPropertyDescriptor(_class.prototype, "isInView"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "scrollManually", [_dec5], Object.getOwnPropertyDescriptor(_class.prototype, "scrollManually"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "bringInView", [_dec6], Object.getOwnPropertyDescriptor(_class.prototype, "bringInView"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "reset", [_dec7], Object.getOwnPropertyDescriptor(_class.prototype, "reset"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleNext", [_dec8], Object.getOwnPropertyDescriptor(_class.prototype, "handleNext"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleLast", [_dec9], Object.getOwnPropertyDescriptor(_class.prototype, "handleLast"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleClose", [_dec10], Object.getOwnPropertyDescriptor(_class.prototype, "handleClose"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "showPopover", [_dec11], Object.getOwnPropertyDescriptor(_class.prototype, "showPopover"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "getCalculatedPosition", [_dec12], Object.getOwnPropertyDescriptor(_class.prototype, "getCalculatedPosition"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "GetElementAndDetail", [_dec13], Object.getOwnPropertyDescriptor(_class.prototype, "GetElementAndDetail"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "highLight", [_dec14], Object.getOwnPropertyDescriptor(_class.prototype, "highLight"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "start", [_dec15], Object.getOwnPropertyDescriptor(_class.prototype, "start"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "GetElementAndDetailHint", [_dec16], Object.getOwnPropertyDescriptor(_class.prototype, "GetElementAndDetailHint"), _class.prototype)), _class));
var guider = new Guider();
export default guider;
window.guider = guider;